<template>
	<uni-popup ref="popupRef" type="bottom">
		<view class="popup">
			<view class="popup-head flex-row">
				<text class="title">服务评价</text>
				<view @tap="close" class="close flex-column">
					<text class="iconfont icon-close"></text>
				</view>
			</view>
			<scroll-view class="popup-body" :scroll-y="true" :show-scrollbar="false">
				<view class="tip">感谢您对我们的服务做出评价，您的反馈非常重要，我们会努力提供更好的服务！</view>
				<view class="service">
					<view class="label"><text class="require">*</text>服务评价</view>
					<view class="items flex-row">
						<view @click="form.service = 0" class="item flex-row" :class="{active: form.service === 0}">
							<image class="icon" src="@/static/img/svg/unsatisfied.svg" />
							<text class="text">不满意</text>
						</view>
						<view @click="form.service = 1" class="item flex-row" :class="{active: form.service === 1}">
							<image class="icon" src="@/static/img/svg/normal.svg" />
							<text class="text">一般</text>
						</view>
						<view @click="form.service = 2" class="item flex-row" :class="{active: form.service === 2}">
							<image class="icon" src="@/static/img/svg/satisfied.svg" />
							<text class="text">满意</text>
						</view>
					</view>
					<view class="label">更多反馈建议</view>
					<textarea class="textarea" v-model="form.suggestion" placeholder="请输入" :maxlength="200"></textarea>
				</view>
				<view class="foot">
					<view @tap="submit" class="submit flex-column">提交评价</view>
				</view>
			</scroll-view>
		</view>
	</uni-popup>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import Validator from '@/common/validate'
import XBCCS from 'xbccs'

const popupRef = ref(null)
const form = reactive({
	service: '',
	suggestion: '',
})
const props = defineProps({
	conversation: { type: Object, default: () => {} }
})

function close(){
	popupRef.value?.close()
}

// 弹窗
function showToast(title: string = ''){
	uni.showToast({
		icon: 'none',
		title
	})
	return
}

// 提交
function submit(){
	// 数据校验
	if(Validator.isNull(form.service)){
		return showToast('请选择服务满意度')
	}
	
	// 执行提交
	try{
		uni.showLoading({
			title: '评价提交中'
		})
		
		XBCCS.commentConversation({
			conversationId: props.conversation?.conversationId,
			...form
		}).then(() => {
			form.service = ''
			form.suggestion = ''
			showToast('评价成功')
			popupRef.value?.close()
		}).catch((err) => {
			showToast(err?.data?.msg || '评价失败')
		})
	}finally{
		uni.hideLoading()
	}
}

defineExpose({
	open(){
		popupRef.value?.open()
	}
})

</script>

<style lang="scss" scoped>
@import url('./style.scss');
.popup-body{
	padding: 0 40rpx;
}

.tip{
	color: #666;
	font-size: 28rpx;
	line-height: 1.6;
	margin-bottom: 30rpx;
	padding-bottom: 30rpx;
	border-bottom: 2rpx solid #ccc;
}

.service{
	.label{
		color: #666;
		font-size: 30rpx;
		padding-top: 30rpx;
		margin-bottom: 12rpx;
	}
	
	.textarea{
		width: 100%;
		height: 240rpx;
		font-size: 28rpx;
		padding: 20rpx 24rpx;
		border-radius: 10rpx;
		border: 2rpx solid #ccc;
	}
	
	.require{
		color: red;
		margin-right: 4rpx;
	}
	
	.items{
		justify-content: flex-start;
		
		.item {
			height: 52rpx;
			cursor: pointer;
			border-radius: 60rpx;
			margin: 10rpx 36rpx 12rpx 0;
			border: 2rpx solid #e6e6e6;
			position: relative;
		
			&:nth-child(3) {
				margin-right: 0;
			}
		
			.icon {
				@include fullsize(56rpx);
				filter: grayscale(70%);
				-webkit-filter: grayscale(70%);
				position: absolute;
				top: -4rpx;
				left: -4rpx;
			}
		
			.text {
				font-size: 26rpx;
				padding: 0 24rpx 0 56rpx;
			}
		
			&.active {
				border-color: #F5C33A;
		
				.icon {
					filter: grayscale(0);
					-webkit-filter: grayscale(0);
				}
		
				.text {
					color: #F5B400;
				}
			}
		}
	}
}

.foot{
	padding: 80rpx 20rpx 40rpx;
	
	.submit{
		color: #fff;
		width: 100%;
		height: 80rpx;
		line-height: 1;
		font-size: 32rpx;
		border-radius: 10rpx;
		background-color: var(--theme-color);
		transition: opacity 0.1s;
		
		&:active{
			opacity: 0.8;
		}
	}
}
</style>